<template>
	<view class="app"> 
		<view class="order-address-info box-card">
			<view class="order-address-info-top">
				<text class="order-card-title">预约上门</text>
				<text>预约时间：{{ order.book_time == 0?'尽快':order.book_time}}</text>
			</view>
			<view class="order-address-detail" > 
				<view class="order-address-detail-left"> 
					<i class="iconfont icon-shouhuodizhi"></i> 
				</view>
				<view class="order-address-detail-right">
					<view  >
						<text class="order-address-contact">{{order.address.name}}</text>
						<text class="phone-number" @click="phoneCall(order.address.mobile)">{{order.address.mobile}}</text>
					</view>
					<view style="color:#666">{{order.address.address}}</view>
				</view>
			</view>
		</view>
		<view class="order-info box-card">
			<text class="order-card-title">订单信息</text>
			<view class="order-info-row">
				<label>回收类别：</label>
				<text>{{ order.book_category?order.book_category:'其他' }}</text>
			</view>
			<view class="order-info-row">
				<label>订单编号：</label>
				<text>{{ order.order_no }}</text>
			</view>
			<view class="order-info-row">
				<label>下单时间：</label>
				<text>{{ order.createtime }}</text>
			</view>
			<view class="order-info-row">
				<label>订单备注：</label>
				<text>{{ order.remarks?order.remarks:'无' }}</text>
			</view>
		</view>
		<view  v-if="waste.length > 0" >
			<view class="site-info box-card">
				<u-tabs active-color="#19be6b" :list="waste" name="categoryName" :is-scroll="waste.length > 6" :current="categoryIndex" @change="categoryChange"></u-tabs>
				<u-checkbox-group class="waste-checkbox-group"  @change="wasteCheckboxChange">
					<view v-show="index == categoryIndex" class="category-panel" v-for="(categoryItem,index) in waste" :key="categoryItem.id">
						<view class="waste-item"  v-for="wasteItem in categoryItem.waste" :key="wasteItem.id">
							<u-checkbox active-color="#19be6b" v-model="wasteItem.checked"  :name="wasteItem.id" >{{wasteItem.name}}</u-checkbox>
							<text >￥{{wasteItem.price}}/{{wasteItem.units}}</text>
						</view>
					</view> 
				</u-checkbox-group>
			</view>
			<view v-show="wasteCheckList.length > 0" class="waste-estimate box-card">
				<view class="waste-estimate-title">
					<view class="waste-estimate-title-left">请填写实收信息：</view>
					<view class="waste-estimate-title-right" style="color:red">(请仔细检查确认无误再确认结算)</view>
				</view>
				<view>
					<view v-for="(categoryItem,index) in waste" :key="categoryItem.id">
						<view class="waste-item"  v-for="wasteItem in categoryItem.waste" :key="wasteItem.id" v-if="wasteItem.checked">
							<text>{{wasteItem.name}}</text>
							<view class="waste-estimate-right">
								<u-input placeholder="请输入实收数量" :clearable="false" class="waste-estimate-input" maxlength="5" v-model="wasteItem.wasteNums" type="number" input-align="right"/>
								<text>{{wasteItem.units}}</text>
							</view>
						</view>
					</view> 
				</view>
				<view class="waste-estimate-sum">
					<text>合计结算金额</text>
					<text class="waste-estimate-money">￥ <text class="waste-estimate-money-text">{{estimateMoney}}</text> 元</text>
				</view>
			</view>
			<view class="waste-content box-card">
				<view class="waste-estimate-title" style="padding-bottom: 10rpx;">
					<view class="waste-estimate-title-left">回收拍照：</view>
				</view>
				<view class="waste-content-input">
					<u-upload ref="uUpload"  width="160rpx" height="160rpx" max-count="5" :action="uploadUrl" :header="uploadHeader" :file-list="fileList" ></u-upload>
				</view>
			</view> 
			<view class="order-bottom-row">
				<u-button shape="square" type="success" @click="checkSubmit">确认结算</u-button>
			</view>
			<c-safe-bottom></c-safe-bottom>
		</view> 
		<c-safe-bottom></c-safe-bottom>
	</view>
</template>
<style scoped>   
	.order-address-info{margin-top:30rpx;}
	.order-address-info-top{display: flex;align-items: center;justify-content: space-between;}
	.order-card-title{ font-size: 34rpx;font-weight: bold;color:#333;}
	.order-address-detail{margin-top:30rpx;display: flex;align-items: center; }
	.order-address-detail-left{ margin-right:10rpx;}
	.icon-shouhuodizhi{ font-size: 80rpx;}
	.order-address-detail-right{}
	.order-info{font-size: 30rpx;}
	.order-address-contact{color:#333;font-size: 30rpx;font-weight: bold;margin-right: 20rpx;}
	.order-info-row{margin-top:20rpx;color:#666}
	.order-waste-list{margin-top: 20rpx;}
	.order-waste-item{ padding:10rpx 0;display: flex;align-items: center;justify-content: space-between;}
	 
	 .site-info{overflow: hidden;}
	 .waste-checkbox-group{ display: flex;width:100%;flex-direction: column;}
	 .category-panel{width: 100%;}
	 .waste-item{ padding:20rpx;border-top: 1rpx solid #eee;display: flex;align-items: center;justify-content: space-between;}
	 .waste-estimate{ }
	 .waste-estimate .waste-item{ padding:10rpx 20rpx;}
	 .waste-estimate-title{display: flex;align-items: center;padding: 20rpx;}
	 .waste-estimate-title-left{flex:1;}
	 .waste-estimate-title-right{font-size: 24rpx;color:#aaa;}
	 .waste-estimate-right{flex:1;display: flex;align-items: center;margin-left: 20rpx;justify-content: flex-end;}
	 .waste-estimate-input{margin:0 10rpx;}
	 .waste-estimate-sum{ display: flex;align-items: center;padding:20rpx;border-top: 1rpx solid #eee;}
	 .waste-estimate-money{flex:1;text-align: right;}
	 .waste-estimate-money-text{font-weight: bold;color:red;margin:0 10rpx;} 
	 .order-bottom-row {padding: 20rpx;}
	 .phone-number{color:blue;text-decoration: underline;}
</style>
<script>  
	export default {
		data() {
			return {
				order:{
					
				},
				orderStatusName:{
					'0':'待接单','1':'已接单','2':'已完成','-1':'已取消',
				},
				recycler:0,
				waste:[], 
				categoryIndex:0,
				wasteCheckList:[],
				uploadUrl:this.$u.api.user.getUploadUrl(),
				uploadHeader:this.$u.api.user.getUploadHeader(),
				fileList:[],
			}
		}, 
		computed:{
			
			estimateMoney(){
				let sum = 0
				if(this.waste.length <= 0){
					return sum
				}
				this.waste.forEach(category => {
					if(category.waste.length <= 0){
						return true
					}
					category.waste.forEach(waste => {
						if(!waste.checked || !waste?.wasteNums || waste?.wasteNums <=0){
							return true
						}
						sum += (waste.wasteNums * waste.price)
					})
				})
				return sum.toFixed(2)
			}
		},
		methods:{
			phoneCall(number){
				uni.makePhoneCall({
				   phoneNumber: number
				})
			},
			getOrderInfo(orderId){
				this.$u.api.recycler.getOrderInfo({id:orderId}).then(res => {
					if(res.code != 1){
						this.$u.toast(res.msg)
						setTimeout(function(){
							uni.navigateBack();
						},1000)
						return false
					}
					 
						let date = new Date(res.data.createtime* 1000);
						let year = date.getFullYear();
						let month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以需要+1
						let day = ("0" + date.getDate()).slice(-2);
						let hours = ("0" + date.getHours()).slice(-2);
						let minutes = ("0" + date.getMinutes()).slice(-2);
						 let seconds = ("0" + date.getSeconds()).slice(-2);
						res.data.createtime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
					
					this.order = res.data
					
					this.getSiteWaste()
				})
			},
			getSiteWaste(){
				this.$u.api.site.getSiteWaste({}).then(res => {
					this.waste = res.data || []
					
						this.waste.forEach((category,categoryIndex) => {
							
							this.$set(this.waste,categoryIndex,category)
						}) 
					
				})
			},
			categoryChange(index){
				this.categoryIndex = index
			},
			categorySwiperChange(e){
				this.categoryIndex = e.detail.current
			},
			wasteCheckboxChange(e){
				this.wasteCheckList = e 
			},
			checkSubmit(){
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确认结算 ￥' + this.estimateMoney + " 到用户余额？",
					success: function (res) {
						if (res.confirm) {
							_this.submitOrder()
						}  
					}
				});
			},
			submitOrder(){ 
				let files = []
				let hasUpload = false
				this.$refs.uUpload.lists.forEach(item => {
					if(item.progress < 100){
						hasUpload = true
						return true
					}
					if(item?.response == undefined && item?.url){
						files.push(item.url) 
						return true
					}
						 
					if((item?.response?.status != 200 || item?.response?.data == undefined || item?.response?.data == '')){
						return true
					}
					files.push(item.response.data) 
				})  
				if(hasUpload){
					this.$u.toast('有图片正在上传，请耐心等待')
					return false
				}
				let data = {
					orderId:this.order.id,
					orderRecyclerPhoto:files,
					orderInfo:[]
				} 
				
				this.waste.forEach(categoryItem => {
					categoryItem?.waste.forEach(wasteItem => {
						if(wasteItem.checked){
							data.orderInfo.push({
								wasteId:wasteItem.id,
								wasteNums:wasteItem.wasteNums || 0
							})
						}
					})
				})
				
				 let obj = {
					 orderId:data.orderId,
					 orderRecyclerPhoto:data.orderRecyclerPhoto,
					 orderInfo:JSON.stringify(data.orderInfo),
				 }
				this.$u.api.recycler.finishOrder(obj).then(res => {
					this.$u.toast(res.msg)
					if(res.code != 1){ 
						return false
					}
					uni.$emit('orderListUpdate')
					uni.$emit('orderInfoUpdate')
					setTimeout(function(){
						uni.navigateBack();
					},1000)
				}).catch(err => {
					this.$u.toast('保存失败')
				})
			}
		},
		onLoad(option){
			if(!option?.orderId){
				uni.navigateBack()
			} 
			if(option?.recycler){
				this.recycler = option.recycler 
			}   
			this.getOrderInfo(option.orderId) 
		}
	}
</script>